<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>

    <script>
        //定义一个虚拟dom的结构
        const app = {
            type:"div",
            props:{
                className:"Box",
                children:[
                    {
                        type:"p",
                        props:{
                            className:"p_1",
                            children:['hi, my is p']
                        }
                    },
                    {
                        type:"span",
                        props:{
                            className:"span_1",
                            children:['hi, my is span'],
                        }
                    },
                    {
                        type:"li",
                        props:{
                            className:"li_1",
                            children:['hi, my is li']
                        }
                    }
                ]
            }
        }
    
        //封装一个虚拟dom的函数
        const render = (app,root) =>{
            // app是模拟好的结构  root 是渲染容器
            // 封装一个递归调用的函数
            const createElement = (app,root) =>{
                //定义一个站位符
                let cur = null
                if (typeof app === "string") {
                    cur = window.document.createTextNode(app)
                }else{
                    let {type,props} = app
                    cur = window.document.createElement(type)
                    console.log( Object.keys(props));
                    Object.keys(props).map(item=>{
                        switch (item) {
                            case "className":
                                cur.setAttribute('class',props[item])
                                break;
                            case "children":
                                if (Array.isArray(props.children)) {
                                    props.children.map(val=>{
                                        createElement(val,cur)
                                    })
                                }
                                break;
                        }
                    })
                }
                root.append(cur)
            }
            createElement(app,root)
        }

        render(app,window.document.querySelector("#root"))
    </script>
</body>
</html>